Redesign home page layout and update featured content - #174
Merged
Conversation
…reen Three changes to the front door. The hero's first button says Quickstart. It always went to /get_started/quickstart; "Get Started" named the section around that page rather than the page, and the reader who presses it lands on something with a different name at the top. The first card is the Tutorial instead of the Cookbook. A recipe answers a question you already have, and a first visitor does not have one yet — the walkthrough is what they came for, and the Cookbook is one click away in the Guide nav the moment it is wanted. And the page now fits a laptop screen. At the theme's own sizes it rendered 1152px tall at a 1440-wide window, so on a 13" MacBook the three cards and the samples button sat below the fold: a signpost you have to scroll. Tightening the hero, the cards, the samples block and the gap above the footer brings it to 750px, footer included, with room for a hero headline that wraps. Nothing is dropped or hidden — the type keeps its ranks, it is the air that goes. Two of the rules needed more specificity than they first had: the theme's are Vue scoped styles, so a bare `.VPHome` or `.VPFooter` is one unit against their two and silently does nothing. All of them now carry the ancestors that clear it, and the reason is written in the file. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HiTYuWrPNZX4zNQgrEzpsf
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Restructures the home page to fit within a single browser viewport on typical laptop screens, and updates the featured content to prioritize the Tutorial over the Cookbook as the primary entry point for new users.
Key Changes
Layout & Styling (
docs/.vitepress/theme/style.css)Home Page Content (
docs/index.md)/tutorials/overviewImplementation Details
The CSS changes employ a specificity strategy using
.Layout .VPHomeancestors to override scoped Vue component styles (which include[data-v-…]attributes). This approach is necessary because the theme's component styles compile with higher specificity, requiring three-unit selectors to take precedence. The media query targets 960px and above, leaving smaller screens to use the theme's default responsive behavior.https://claude.ai/code/session_01HiTYuWrPNZX4zNQgrEzpsf